<template>
	<section>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="车辆检查" name="first">
				<el-form :label-position="labelPosition" label-width="100px">
					<el-row type="flex" justify="center" :gutter="50">
						<el-col :span="10">							
							<el-form-item label="车号:">
								苏s66966
							</el-form-item>
							<el-form-item label="检查地点:">
								防撞车停车场
							</el-form-item>
							<el-form-item label="检查日期:">
								2021/05/06
							</el-form-item>
							<el-form-item label="备注:">
								检查详情备注检查详情备注检查详情备注检查详情备注检查详情备注检查详情备注
							</el-form-item>
						</el-col>
						<el-col :span="10">							
							<el-form-item label="车辆行驶里程:">
								98755KM
							</el-form-item>
							<el-form-item label="检查人:">
								王东君
							</el-form-item>
							<el-form-item label="驾驶员">
								易斌
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-row class="tablestyle">
					<el-col :span="24">
						<table class="am-table am-table-bordered am-table-centered">
							<tbody>
								<tr>
									<th rowspan="26" class="am-text-middle">车辆检查项目</th>
									<th rowspan="10" class="am-text-middle">驾驶室</th>
									<th class="am-text-middle">项目</th>
									<th class="am-text-middle">合格</th>
									<th class="am-text-middle">不合格</th>
									<th rowspan="15" class="am-text-middle">防撞检查项目</th>
									<th rowspan="11" class="am-text-middle">防撞部</th>
									<th class="am-text-middle">项目</th>
									<th class="am-text-middle">合格</th>
									<th class="am-text-middle">不合格</th>
								</tr>
								<tr>
									<td>安全带</td>
									<td>
										<el-radio v-model="radio" label=""></el-radio>
									</td>
									<td>&nbsp;</td>
									<td>防撞包</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>主防设备</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>防撞缓冲杆</td>
									<td>
										<el-radio v-model="radio" label=""></el-radio>
									</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>车内标贴</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>车厢配重块</td>
									<td>
										<el-radio v-model="radio" label=""></el-radio>
									</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>内部环境</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>防撞块链接螺栓</td>
									<td>&nbsp;</td>
									<td>
										<el-radio v-model="radio" label=""></el-radio>
									</td>
								</tr>
								<tr>
									<td>车内音响</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>液压装置</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>仪表盘</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>液压油管</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>操作部件</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>液压油管接口</td>
									<td>
										<el-radio v-model="radio" label=""></el-radio>
									</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>倒车影像</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>液压电动机线路</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>空调</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>防撞包电缆线路</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td rowspan="8" class="am-text-middle">车身外观</td>
									<td>灯光</td>
									<td>
										<el-radio v-model="radio" label=""></el-radio>
									</td>
									<td>&nbsp;</td>
									<td>防撞包辅助轮</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>车身漆</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td rowspan="4">预警指示</td>
									<td>LED显示屏</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>雨刮器</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>危险报警器</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>车身标识</td>
									<td>&nbsp;</td>
									<td>
										<el-radio v-model="radio" label=""></el-radio>
									</td>
									<td>预警爆闪灯</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>倒车镜</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>防撞包反光标贴</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>倒车监视</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td rowspan="7" class="am-text-middle">安全例检设置 </td>
									<td rowspan="7">底盘工具箱</td>
									<td>灭火器</td>
									<td>&nbsp;</td>
									<td>
										<el-radio v-model="radio" label=""></el-radio>
									</td>
								</tr>
								<tr>
									<td>玻璃</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>止推器</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>防撞包托架</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>三角牌</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td rowspan="8" class="am-text-middle">车辆底盘</td>
									<td>轮胎</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>敲胎锤</td>
									<td>&nbsp;</td>
									<td>
										<el-radio v-model="radio" label=""></el-radio>
									</td>
								</tr>
								<tr>
									<td>转向机制</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>千斤顶</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>制动</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>随车工具</td>
									<td>&nbsp;</td>
									<td>
										<el-radio v-model="radio" label=""></el-radio>
									</td>
								</tr>
								<tr>
									<td>发动机</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td>黄油枪</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>变速箱</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td colspan="2" class="am-text-middle">监控设备</td>
									<td>探头</td>
									<td>&nbsp;</td>
									<td>
										<el-radio v-model="radio" label=""></el-radio>
									</td>
								</tr>
								<tr>
									<td>差速器</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
									<td colspan="5" rowspan="3">&nbsp;</td>
								</tr>
								<tr>
									<td>传动轴</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>防冻液</td>
									<td>&nbsp;</td>
									<td>
										<el-radio v-model="radio" label=""></el-radio>
									</td>
								</tr>
							</tbody>
						</table>
					</el-col>
				</el-row>
				<el-row :gutter="20" class="padtit">
					<el-col :span="4">检查照片(最多6张)：</el-col>
				</el-row>
				<el-row :gutter="20" class="pddtop">
					<el-col :span="4" v-for="fit in fits" :key="fit">
						<img :src="url" width="100%">
					</el-col>
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="车辆整改" name="second">
				<el-row :gutter="20" class="padtit">
					<el-col :span="4">整改照片：</el-col>
				</el-row>
				<el-row :gutter="20" class="pddtop">
					<el-col :span="4" v-for="fit in fits" :key="fit">
						<img :src="url" width="100%">
					</el-col>
				</el-row>
				<el-row class="padbak">
					<el-col :span="10">
						<el-form :label-position="labelPosition" label-width="100px">
							<el-form-item label="备注:">
								这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
			</el-tab-pane>
		</el-tabs>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				labelPosition: 'right',
				activeName: 'first',
				fits: ['车辆正面：', '车辆侧面：', '车辆内饰：'], //车辆基础信息				
				url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
				tableData: [{
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}],
				radio: ''
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
		}
	}
</script>
<style>
	.pddtop {
		padding: 5px 0 0px 120px;
	}

	.padtit {
		padding: 0px 0 10px 120px;
	}

	.padbak {
		padding: 0 0 0 60px;
	}

	/* table */
	.am-tabs-bd .am-tab-panel * {
		-webkit-user-drag: none;
	}

	.am-table-bordered {
		border: 1px solid #ddd;
		border-left: none;
	}

	.am-table {
		width: 100%;
		margin-bottom: 1.6rem;
		border-spacing: 0;
		border-collapse: separate;
	}

	table {
		max-width: 100%;
		background-color: transparent;
		empty-cells: show;
	}

	.am-table-bordered>tbody>tr:first-child>td,
	.am-table-bordered>tbody>tr:first-child>th {
		border-top: none;
	}

	.am-table-centered>tbody>tr>td,
	.am-table-centered>tbody>tr>th,
	.am-table-centered>tfoot>tr>td,
	.am-table-centered>tfoot>tr>th,
	.am-table-centered>thead>tr>td,
	.am-table-centered>thead>tr>th {
		text-align: center;
	}

	.am-table-bordered>tbody>tr>td,
	.am-table-bordered>tbody>tr>th,
	.am-table-bordered>tfoot>tr>td,
	.am-table-bordered>tfoot>tr>th,
	.am-table-bordered>thead>tr>td,
	.am-table-bordered>thead>tr>th {
		border-left: 1px solid #ddd;
	}

	.am-table>tbody>tr>td,
	.am-table>tbody>tr>th,
	.am-table>tfoot>tr>td,
	.am-table>tfoot>tr>th,
	.am-table>thead>tr>td,
	.am-table>thead>tr>th {
		padding: .7rem;
		line-height: 1.6;
		vertical-align: top;
		border-top: 1px solid #ddd;
	}

	.am-text-middle {
		vertical-align: middle !important;
		font-weight: bold;
	}

	.tablestyle {
		padding: 0 120px;
	}
</style>
